<script>
    import SlotComp from "@/components/slotComp.svelte";
    let items = ['a','b','c','d'];
    function handleKeydown(event) {
		// alert(`pressed the ${event.key} key`);
	}
</script>

<h1>Hello world嗷嗷!</h1>

<SlotComp {items} let:item={item}>
    <!-- 这里是存在作用域的 -->
    <!-- 具名插槽 -->
    <div slot='item'>{item}</div>
</SlotComp>

<!-- 时间监听 -->

<svelte:window on:keydown={handleKeydown}/>
<!-- <svelte:body on:event={handler}/> -->
<!-- 将此标签编译为自定义tag名称 -->
<!-- <svelte:options tag="my-custom-element"/> -->
<style>
	h1 {
		color: #cac6c5;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}
</style>
